<template>

<a-row>
  <a-col :span="2">
    <a-button type="primary" size="small">新增</a-button>
  </a-col>

  <a-col :span="8">
    <a-input placeholder="请输入姓名" v-model:value="dto.name"></a-input>
  </a-col>
  <a-col :span="10">
    <a-input placeholder="请输入邮箱" v-model:value="dto.email"></a-input>
  </a-col>

   <a-col :span="2">
    <a-button type="primary" size="small" @click="handleTableChange">搜索</a-button>
  </a-col>
</a-row>

<hr/>


  <a-table
    :dataSource="userList"
    :columns="columns"
    :rowkey="rowkey"
    :loading="loading"
    :pagination="pagination"
    @change="handleTableChange"
  />
</template>

<script setup lang="ts">
import { ApiResponse, User } from "../../model/two/User";
import { useRequest } from "vue-request";
import { ref, computed, onMounted, watch,watchEffect } from "vue";
import axios from "../../api/request";


const dto = ref({page: 1,size: 10,name: '',email: ''})
const total = ref(0)

const { data, loading, run } = useRequest<User[]>(
  () =>
    axios
      .get<ApiResponse>(
        `/api/userPage?page=${dto.value.page}&pageSize=${dto.value.size}&name=${dto.value.name}&email=${dto.value.email}`
      )
      .then((res) => {
        // userList.value = res.data.data;
        total.value = res.data.total;
        return res.data.data;
      }),
  {
    refreshDeps: [dto],
    manual: true,
  }
);

const userList = computed(() => data.value || []);

// 分页配置
const pagination = computed(() => ({
  current: dto.value.page,
  pageSize: dto.value.size,
  total: total.value,
  showTotal: (total: number) => `共 ${total} 条`,
  showSizeChanger: true,
  showQuickJumper: true,
  pageSizeOptions: ["5", "10", "20", "50"],
}));

// 切换分页时触发
function handleTableChange(paginationChange: any) {
  dto.value.page = paginationChange.current;
  dto.value.size = paginationChange.pageSize;
  pagination.value.current = paginationChange.current;
  pagination.value.pageSize = paginationChange.pageSize;
}


function handleSearch() {
  run();
}

watch(dto, () => {
  run();
}, { deep: true });

onMounted(() => {
  run();
});

const columns = ref([
  { title: "编号", dataIndex: "id" },
  { title: "姓名", dataIndex: "name" },
  {
    title: "邮箱",
    dataIndex: "email",
    customRender: ({ text }) => {
      return text ?? "-"; // 显示 null 时渲染为 "-"
    },
  },
]);

function rowkey(r: User) {
  return r.id;
}
</script>